<script lang="ts" setup>
import { ref, computed, inject } from 'vue';
import { shortcutProps, shortcutEmits } from './shortcut';
import { shortcutGroupContextKey } from '../../../tokens/shortcut';

defineOptions({ name: 'WindowsShortcut' });

const props = defineProps(shortcutProps);
const emits = defineEmits(shortcutEmits);

let shortcut = ref(HTMLDivElement);
const isSelect = ref(false);
// const list = ref([
//   { title: '打开', icon: 'View' },
//   { title: '删除', icon: 'Delete' },
// ]);
const shortcutGroupContext = inject(shortcutGroupContextKey, undefined);

const _size = computed(() => {
  return shortcutGroupContext ? shortcutGroupContext.size : props.size;
});

const handleShortcutdblclick = (event: MouseEvent) => {
  emits('dblclick', event);
};
const handleShortcutRemove = (event: MouseEvent) => {
  emits('remove', event);
};

const select = () => {
  isSelect.value = true;
};
const noSelect = () => {
  isSelect.value = false;
};
</script>

<template>
  <div class="shortcut" @click="select" @dblclick="handleShortcutdblclick" ref="shortcut" @contextmenu="select">
    <div :class="[isSelect ? 'select' : '', 'shortcut__content']" :style="{ color: props.color }" v-clickoutside="noSelect">
      <el-image :style="{ width: _size + 'px' }" :src="props.icon" fit="contain" />
      <span>{{ title }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shortcut {
  width: 80px;
  height: 70px;
  margin-bottom: 15px;
  margin-right: 30px;
  user-select: none;
  .shortcut__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    padding: 2px 0px;
    text-align: center;
    border-radius: 2px;
    &:hover,
    &.select {
      background: rgba(220, 220, 220, 0.15);
    }
  }
}
</style>
